<template>
	<view>
		<view class="header">
			<view @click="selectCate(1)" class="header_select border_right" :class="type == 1 ? 'border-bottom' : ''">已完成</view>
		    <view @click="selectCate(2)" class="header_select border_right" :class="type == 2 ? 'border-bottom' : ''">今日预约</view>
		    <view @click="selectCate(3)" class="header_select border_right" :class="type == 3 ? 'border-bottom' : ''">明日预约</view>
		    <view @click="selectCate(4)" class="header_select" :class="type == 4 ? 'border-bottom' : ''">更多预约</view>
		</view>
		
		<!-- <view class="content">
		    <view class="list" v-for="(item,index) in list" :key="index" @click="jump('./info',item)">
		        <view class="list_center">
		            <view class="list_top">客户姓名:{{item.member_name}}</view>
		            <view class="backgroundYellow" v-if="item.type == 1">进行中</view>
					<view class="backgroundGreen" v-if="item.type == 2">已完成</view>
					<view class="backgroundRed" v-if="item.type == 3">已取消</view>
		        </view>
				<view class="list_center">
		            <view>会员等级:{{item.lv}}</view>
		            <view>电话:{{item.phone}}</view>
		        </view>
		       <view class="list_line">预约项目:{{item.card_name}}</view>
				<view class="list_line">预约时间:{{item.date}} {{item.time}}</view>
				<view class="list_center_item" v-if="item.goods.length > 0">
					<view class="item_top">使用物品</view>
					<view class="item_content1" v-for="(iitem,iindex) in item.goods" :key="iindex">
						<text class="oneChild">{{iitem.name}}</text>
						<text class="twoChild">{{iitem.use_num}}个/次</text>
					</view>
				</view>
		    </view>
		</view> -->
		<view class="table">
			<table border="0" width="95%" cellspacing="0" cellpadding="0" 
			v-for="(item,index) in list" :key="index" @click="jump('./info',item)">
				<tr>
					<th>预约项目</th>
					<td>{{item.card_name}}</td>
					<td class="backgroundYellow" v-if="item.type == 1">进行中</td>
					<td class="backgroundGreen" v-if="item.type == 2">已完成</td>
					<td class="backgroundRed" v-if="item.type == 3">已取消</td>
				</tr>
				<tr>
					<th>客户姓名</th>
					<th>美容师</th>
					<th>预约时间</th>
				</tr>
				<tr>
					<td>{{item.member_name}}</td>
					<td>{{item.user_name}}</td>
					<td class="size">{{item.date}} {{item.stime}}</td>
				</tr>
			</table>
		</view>
		
	</view>
</template>
<script>
import request from '@/util/request.js'
export default {
	data() {
		return {
			//oaRole 1:店长2:员工3:商户
			oaRole:0,
			type:2,
			list:[],
			page:1,
			pageShow:true
		}
	},
	onLoad:function(){
		uni.showLoading({
		    title: '加载中'  
		});
		this.getList()
		this.oaRole = uni.getStorageSync('oaRole')
	},
	methods: {
		getList:function(){
			var data = {
				oa_id:uni.getStorageSync('oa_id'),
				page:this.page,
				type:this.type
			}
			var that = this
			request({
				url: 'manage/mark/all',
				method: 'get',
				data:data,
				success: (res) => {
					uni.hideLoading();
					if(res.data.code == 1){
						if(res.data.data.last_page <= that.page){
							that.pageShow = false
						}
						if(that.page == 1){
							that.list = res.data.data.data
						}else{
					        var list = that.list
					        that.list = list.concat(res.data.data.data)
					    }
					}
				},
			})
		},
		selectCate:function(key){
			this.type = key
			this.page = 1
			this.pageShow = true
			uni.showLoading()
			this.getList();
		},
		onReachBottom: function(){
			if(this.pageShow){
				 //当前不是最后一页可加载
				 this.page = this.page + 1
				 uni.showLoading()
				 this.getList();
			}
		},
		jump:function(url,item){
			uni.navigateTo({
			  url:url+'?item='+JSON.stringify(item)
			})
		}
	}
}
</script>

<style>
@import url("../css/mark/index.css");
</style>